import { defineStore } from "pinia";
import { useStorage } from "@vueuse/core";
import { reactive, computed } from "vue";
import defaultSettings from "@/settings";

// 导入 Element Plus 中英文语言包
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";

// setup
export const useAppStore = defineStore("app", () => {
  // state  将状态存储到localStorage
  const device = useStorage("device", "desktop");
  const size = useStorage<any>("size", defaultSettings.size);
  const language = useStorage("language", defaultSettings.language);
  const sidebarStatus = useStorage("sidebarStatus", "closed");
  const token = useStorage("tokenValue", null);
  const isFullscreen = useStorage("isFullscreen", false);
  const userName = "";
  /**登录头像 */
  const avatar = useStorage("avatar", "user.gif");
  /**刷新 */
  const refresh = false;
  //侧边栏
  const sidebar = reactive({
    opened: sidebarStatus.value !== "closed",
    withoutAnimation: false,
  });
  const activeTopMenu = useStorage("activeTop", "");
  /**
   * 根据语言标识读取对应的语言包
   */
  const locale = computed(() => {
    if (language?.value == "en") {
      return en;
    } else {
      return zhCn;
    }
  });

  // actions
  /**切换导航栏模式 */
  function toggleSidebar() {
    sidebar.opened = !sidebar.opened;
    console.log(sidebar.opened);
    sidebar.withoutAnimation = false;
    //修改导航栏collapse的转换模式
    if (sidebar.opened) {
      sidebarStatus.value = "opened";
    } else {
      sidebarStatus.value = "closed";
    }
  }

  function closeSideBar(withoutAnimation: boolean) {
    sidebar.opened = false;
    sidebar.withoutAnimation = withoutAnimation;
    sidebarStatus.value = "closed";
  }

  function openSideBar(withoutAnimation: boolean) {
    sidebar.opened = true;
    sidebar.withoutAnimation = withoutAnimation;
    sidebarStatus.value = "opened";
  }

  function toggleDevice(val: string) {
    device.value = val;
  }

  function changeSize(val: string) {
    size.value = val;
  }
  /**
   * 切换语言
   *
   * @param val
   */
  function changeLanguage(val: string) {
    language.value = val;
  }
  /**
   * 切换主题
   * @param val
   */
  function changeTheme(val:string)
  {
      console.log({val});
  }
  /**
   * 混合模式顶部切换
   */
  function changeTopActive(val: string) {
    activeTopMenu.value = val;
  }

  /**
   * 获取assets静态资源
   * @param url 图片名称
   * @returns 代码混淆加密后路径
   */
  function getAssetsFile(url: string) {
    // console.log(
    //   new URL(`src/assets/images/${url}`, import.meta.env.VITE_BASE_Assets_API)
    //     .href
    // );
    return new URL(
      `src/assets/images/${url}`,
      import.meta.env.VITE_BASE_Assets_API
    ).href;
  }
  /**用户退出操作 */
  function logOut() {
    localStorage.setItem("tokenValue", "");
  }

  return {
    refresh,
    avatar,
    device,
    sidebar,
    token,
    userName,
    language,
    locale,
    size,
    activeTopMenu,
    isFullscreen,
    toggleDevice,
    changeSize,
    changeLanguage,
    toggleSidebar,
    closeSideBar,
    openSideBar,
    changeTopActive,
    getAssetsFile,
    logOut,
    changeTheme
  };
});
